<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <title>WeIn--注册</title>
    <link rel="shortcut icon" href="backstage/img/logo-title.png">
    <!-- global stylesheets -->
    <!--<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">-->
    <link rel="stylesheet" href="backstage/css/bootstrap.min.css">
    <link rel="stylesheet" href="backstage/css/sucaijiayuan.css">
    <link rel="stylesheet" href="backstage/css/style.default.css" id="theme-stylesheet">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="backstage/css/style.css">
    <link rel="stylesheet" href="backstage/css/login.css">
</head>
<body>


<section>
    <div class="am-g am-g-collapse am-index-video-div">
        <img src="img/top.jpg" style="position:fixed;z-index:-999;" width="100%" class="am-index-img am-show-lg-down">
        <!--header navbar-->
        <header class="header">
            <nav class="navbar navbar-expand-lg" style="background:none;box-shadow: 0 0 0 0;">
                <div class="container">
                    <div class="navbar-holder d-flex align-items-center justify-content-between">
                        <div class="navbar-header">
                            <a href="index.jsp" class="navbar-brand">
                                <div class="brand-text brand-big hidden-lg-down"><img src="backstage/img/logo.png" alt="Logo" class="logo-img"></div>
                                <div class="brand-text brand-small"><img src="backstage/img/logo-min.png" alt="Logo" style="height: 30px;width:30px;margin-left: 5px;"></div>
                            </a>
                        </div>
                    </div>
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item d-flex align-items-center">
                            <a class="nav-link" href="index.jsp">首页</a>
                        </li>
                        <li class="nav-item d-flex align-items-center">
                            <a class="nav-link" href="Courses.jsp">相关课程</a>
                        </li>
                        <li class="nav-item d-flex align-items-center">
                            <a class="nav-link" href="Teachers.jsp">师资力量</a>
                        </li>
                        <li class="nav-item d-flex align-items-center">
                            <a class="nav-link" href="SudentWorks.jsp">学员作品</a>
                        </li>
                        <li class="nav-item d-flex align-items-center" style="margin-right: 70px;">
                            <a class="nav-link" href="Recruit.jsp">人才招聘</a>
                        </li>

                        <li class="nav-item d-flex align-items-center">
                            <a class="nav-link" href="login.html">登录</a>
                        </li>
                        <li class="nav-item d-flex align-items-center">
                            <a class="nav-link" href="register.html">注册</a>
                        </li>
                        <!--<li class="nav-item dropdown"><a id="profile" class="nav-link logout" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle" style="height: 30px; width: 30px;"></a>
                            <ul aria-labelledby="profile" class="dropdown-menu profile">
                                <li>
                                    <a rel="nofollow" href="#" class="dropdown-item d-flex">
                                        <div class="msg-profile"> <img src="backstage/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
                                        <div class="msg-body">
                                            <h3 class="h5">Steena Ben</h3><span>steenaben@Businessbox.com</span>
                                        </div>
                                    </a>
                                    <hr>
                                </li>
                                <li>
                                    <a rel="nofollow" href="profile.html" class="dropdown-item">
                                        <div class="notification">
                                            <div class="notification-content"><i class="fa fa-user "></i>个人信息</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a rel="nofollow" href="profile.html" class="dropdown-item">
                                        <div class="notification">
                                            <div class="notification-content"><i class="fa fa-power-off"></i>退出</div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>-->
                    </ul>
                </div>
            </nav>
        </header>
        <div class="box" style="margin-top: 20px;width: 550px;">
            <div class="box-small">
                <h4 class="title">注册账号</h4>
                    <div class="form-group">
                        <input type="text" name="name"  class="form-control login_input" placeholder=" 用户名"/>
                        <div class="showsIcon" style="background-image: url(img/user.png);"></div>
                        <span id="s_2" style="display: none;"></span>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control login_input" placeholder=" 密码"/>
                        <div class="showsIcon" style="background-image: url(img/pwd.png);width: 28px;height: 28px;left: 3px;"></div>
                    </div>
                    <div class="form-group">
                        <input type="password" id="comfim" name="confimPasswd" class="form-control" placeholder=" 确认密码"/>
                        <div class="showsIcon" style="background-image: url(img/pwd.png);width: 28px;height: 28px;left: 3px;"></div>
                        <span id="s_comfim" style="display: none;"></span>
                    </div>
                    <div class="form-group">
                        <input type="text" name="number"  class="form-control login_input" placeholder=" 手机号码"/>
                        <div class="showsIcon" style="background-image: url(img/phone.png);"></div>
                        <span id="s_0" style="display: none;"></span>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email"  class="form-control login_input" placeholder=" 邮箱"/>
                        <div class="showsIcon" style="background-image: url(img/mailbox.png);"></div>
                    </div>
                    <!--<div class="form-group">
                        <input id="lefile" type="file" style="display:none" name="headfile" >
                        <div class="input-append">
                            <input id="photoCover" class="form-control" type="text" placeholder="(可选)不上传 则头像为默认" name="headfileTemp">
                            <div class="showsIcon" style="background-image: url(img/img.png);"></div>
                            <a class="btn btn-info btn-sm showbtn" onclick="$('input[id=lefile]').click();">Browse</a>
                        </div>
                    </div>-->
                    <div class="form-group">
                        <input class="captcha_input login_input" type="text" name="captcha" placeholder="请输入图片中的验证码" style="margin-right: 23px;">
                        <img src="/codeServlet"  onclick="this.src='/codeServlet?'+new Date().getTime();" width="100" height="40"><br/>
                    </div>
                    <div class="form-group">
                        <button type="submit" data-toggle="modal" data-target="#myModal" id="btn-submit" class="btn btn-primary btn-block">注册</button>
                    </div>
            </div>
            <div class="box-bottom">
                <div>已有账号， <a href="login.html" style="text-decoration: none;color:blue;" title="立即登录">立即登录</a></div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">
                    注册信息提示
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body" style="text-align: center;font-size: 18px;">
                所有的输入都不能为空！！！请检查一下
            </div>
            <div class="modal-footer">
                <button id="dismiss" type="button" class="btn btn-default" data-dismiss="modal" style="display: inline-block;">确定
                </button>
                <a href="" id="toLogin" class="btn btn-primary" style="display: none;">确定</a>
            </div>
        </div>
    </div>
</div>


</body>
</html>
<!--Global Javascript -->
<script src="backstage/js/jquery.min.js"></script>
<script src="backstage/js/popper/popper.min.js"></script>
<script src="backstage/js/tether.min.js"></script>
<script src="backstage/js/bootstrap.min.js"></script>
<script src="backstage/js/jquery.cookie.js"></script>
<script src="backstage/js/jquery.validate.min.js"></script>
<script src="backstage/js/chart.min.js"></script>
<script src="backstage/js/front.js"></script>
<script>
    //判断字符是否为空的方法
    function notEmpty(obj){
        if(typeof obj == "undefined" || obj == null || obj == ""){
            return false;
        }else{
            return true;
        }
    }
    $(function () {
        var tips;
        var isRight = 0;
        $('input[name="name"]').blur(function () {
            var name = $(this).val();
            if(notEmpty(name)){
                $.get("/CheckRegister",{name:name},function (data) {
                    var span = $("#s_2");
                    var flag = data.exsit;
                    span.css("color","#FFF");
                    span.css("display","inline");
                    if(flag==1){
                        isRight = 0;
                        span.html("该用户名太受欢迎啦！请换一个");
                    }else{
                        isRight  = 1;
                        span.html("用户名可用")
                    }
                });
            }

        });

        $("#comfim").blur(function () {
            var pwd = $('input[name="password"]').val();
            if(pwd != $(this).val()){
                $("#s_comfim").css("color","#FFF");
                $("#s_comfim").css("display","inline");
                $("#s_comfim").html("两次密码输入不一致！！！");
                isRight = 2;
            }else {
                $("#s_comfim").html("");
                isRight = 1;
            }
        });

        $('input[name="number"]').blur(function () {
            var phone_number = $(this).val();
            $("#s_0").css("color","#FFF");
            $("#s_0").css("display","inline");
            if(phone_number.length != 11){
                $("#s_0").html("号码输入错误！！！");
                isRight = 3;
                return;
            }else {
                $("#s_0").html("");
                isRight = 1;
            }
        });

        $("#btn-submit").click(function () {
            var input = $(".login_input");
            if(isRight==1){
                //全部数据都不为空时，才发送数据
                if (notEmpty(input.eq(0).val()) && notEmpty(input.eq(1).val()) && notEmpty(input.eq(2).val()) && notEmpty(input.eq(3).val()) && notEmpty(input.eq(4).val())) {
                    $.ajax({
                        type: 'GET',
                        url: '/RegisterServlet',
                        data: {
                            user: input.eq(0).val(),
                            passwd: input.eq(1).val(),
                            captcha: input.eq(2).val(),
                            phone: input.eq(3).val(),
                            email: input.eq(4).val()
                        },
                        contentType: 'text/json,charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            var flag = data.flag;
                            if (flag == 0) {
                                tips = "注册成功！！";
                                $(".modal-body").text(tips);
                                $("#dismiss").css("display", "none");
                                $("#toLogin").css("display", "inline-block");
                                var url = "login.html";
                                $("#toLogin").attr("href", url);
                                $("#myModal").click(function () {
                                    window.location.href = url;
                                });
                            } else if (flag == 1) {
                                tips = "注册失败！！";
                                $(".modal-body").text(tips);
                                $("#dismiss").css("display", "inline-block");
                                $("#toLogin").css("display", "none");
                            } else if (flag == 2) {
                                tips = "验证码输入错误！！";
                                $(".modal-body").text(tips);
                                $("#dismiss").css("display", "inline-block");
                                $("#toLogin").css("display", "none");
                                $(".captcha_input").val("");
                                $("#captcha").attr("src", "/codeServlet?" + new Date().getTime());
                            } else {
                                alert("服务器错误！！");
                            }
                        }
                    });
                }else {
                    $(".modal-body").text("所有的输入都不能为空！！！请检查一下");
                    $("#dismiss").css("display","inline-block");
                    $("#toLogin").css("display","none");
                }
            }else if(isRight==2){
                tips = "两次输入的密码不一致！！";
                $(".modal-body").text(tips);
                $("#dismiss").css("display","inline-block");
                $("#toLogin").css("display","none");
            } else if(isRight==2){
                tips = "手机号输入错误！！";
                $(".modal-body").text(tips);
                $("#dismiss").css("display","inline-block");
                $("#toLogin").css("display","none");
            } else if(isRight==0){
                tips = "用户名已经被注册！！请换一个吧";
                $(".modal-body").text(tips);
                $("#dismiss").css("display","inline-block");
                $("#toLogin").css("display","none");
            }else {
                tips = "有些信息输入错误！！请检查一下";
                $(".modal-body").text(tips);
                $("#dismiss").css("display","inline-block");
                $("#toLogin").css("display","none");
            }


        });
       /* }else {
            tips = "用户信息填写不正确！！请检查一下";
            $(".modal-body").text(tips);
            $("#dismiss").css("display","inline-block");
            $("#toLogin").css("display","none");
        }*/

    });
</script>